<template>
  <div class="WeiPersonal">
    <!-- 登录状态是已登录，则显示以下模块 -->
    <div class="MyPersonal" v-if="islogin">
      <router-link to="/message">
        <van-row>
          <van-col span="6" offset="2">
            <van-image round width="6rem" height="6rem" :src="uAvatar" />
          </van-col>
          <van-col span="13" offset="2">
            <h3>{{ name }}</h3>
            <p>比别人多一点执着，你就会创造奇迹</p>
          </van-col>
        </van-row>
      </router-link>
    </div>

    <!-- 登录状态是未登录，则显示登录/注册 -->
    <div class="dlzc" v-else>
      <van-row>
        <van-col span="7" offset="2">
          <van-image
            style="vertical-align: middle"
            round
            width="5rem" height="5rem"
            src="/banner/9.png"
          />
        </van-col>
        <van-col span="10">
          <router-link to="/login">登录</router-link>
          &nbsp;/&nbsp;
          <router-link to="/register">注册</router-link>
        </van-col>
      </van-row>
    </div>

    <van-row type="flex" justify="space-around" class="wode">
      <van-col span="6" v-if="islogin">
        <router-link to="/download">
          <van-image src="/banner/1.png" />
          <p>我的下载</p>
        </router-link>
      </van-col>
      <van-col span="6" v-else>
        <router-link to="/login">
          <van-image src="/banner/1.png" />
          <p>我的下载</p>
        </router-link>
      </van-col>
      <van-col span="6" v-if="islogin">
        <router-link to="/indent">
          <van-image src="/banner/2.png" />
          <p>我的订单</p>
        </router-link>
      </van-col>
      <van-col span="6" v-else>
        <router-link to="/login">
          <van-image src="/banner/2.png" />
          <p>我的订单</p>
        </router-link>
      </van-col>
      <van-col span="6" v-if="islogin">
        <router-link to="/collect">
          <van-image src="/banner/3.png" />
          <p>我的收藏</p>
        </router-link>
      </van-col>
      <van-col span="6" v-else>
        <router-link to="/login">
          <van-image src="/banner/3.png" />
          <p>我的收藏</p>
        </router-link>
      </van-col>
    </van-row>
    <div class="xingxi">
      <van-cell
        v-if="islogin"
        icon="/banner/4.png"
        title="开课提醒服务"
        is-link
        to="remind"
      />
      <van-cell
        v-else
        icon="/banner/4.png"
        title="开课提醒服务"
        is-link
        to="login"
      />
      <van-cell
        v-if="islogin"
        icon="/banner/5.png"
        title="我的勋章"
        is-link
        to="medal"
      />
      <van-cell
        v-else
        icon="/banner/5.png"
        title="我的勋章"
        is-link
        to="login"
      />
      <van-cell
        v-if="islogin"
        icon="/banner/6.png"
        title="地址管理"
        is-link
        to="ipam"
      />
      <van-cell
        v-else
        icon="/banner/6.png"
        title="地址管理"
        is-link
        to="login"
      />
      <van-cell icon="/banner/7.png" title="设置" is-link to="setting" />
      <van-cell icon="/banner/8.png" title="联系客服" is-link to="service" />
    </div>
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="hand_pick">
        <img
          v-if="selected == 'hand_pick'"
          src="../assets/tabbar_pic/hand_pick1.png"
          slot="icon"
          alt=""
        />
        <img
          v-else
          src="../assets/tabbar_pic/hand_pick.png"
          slot="icon"
          alt=""
        />
        精选</mt-tab-item
      >
      <mt-tab-item id="my_courses">
        <img
          v-if="selected == 'my_courses'"
          src="../assets/tabbar_pic/my_courses1.png"
          slot="icon"
          alt=""
        />
        <img
          v-else
          src="../assets/tabbar_pic/my_courses.png"
          slot="icon"
          alt=""
        />
        我的课程</mt-tab-item
      >
      <mt-tab-item id="cdong">
        <img
          v-if="selected == 'cdong'"
          src="../assets/tabbar_pic/cdong3.png"
          slot="icon"
          alt=""
        />
        <img v-else src="../assets/tabbar_pic/cdong2.png" slot="icon" alt="" />
        虫洞</mt-tab-item
      >
      <mt-tab-item id="personal_center">
        <img
          v-if="selected == 'personal_center'"
          src="../assets/tabbar_pic/personal_center1.png"
          slot="icon"
          alt=""
        />
        <img
          v-else
          src="../assets/tabbar_pic/personal_center.png"
          slot="icon"
          alt=""
        />
        个人中心</mt-tab-item
      >
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: "personal_center",
      islogin: sessionStorage.islogin,
      uAvatar: sessionStorage.uAvatar,
      name: sessionStorage.uName,
    };
  },
  watch: {
    selected(newval) {
      if (newval == "hand_pick") {
        this.$router.push("/"); //  路径 / 映射到Index.vue
      } else if (newval == "me") {
        this.$router.push("/me"); // 路径 /me 映射到Me.vue
      } else if (newval == "personal_center") {
        this.$router.push("/WeiPersonal"); //路径 //WeiPersonal  映射到WeiPersonal.vue
      } else if (newval == "cdong") {
        this.$router.push("/cdong");
      } else if (newval == "my_courses") {
        if (!this.islogin) {
          this.$router.push("/login");
        } else {
          this.$router.push("/myClass");
        }
      }
    },
  },
  mounted() {
    if (this.uAvatar === undefined) {
      this.uAvatar = "/banner/9.png";
    }
  },
};
</script>

<style lang="scss">
.WeiPersonal {
  height: 100vh;
  .MyPersonal {
    padding: 30px 0;
  }
  .MyPersonal img {
    width: 100px;
    left: 10vw;
  }
  .MyPersonal p {
    width: 200px;
    font-size: 14px;
    text-align: left;
    color: #777;
    word-wrap: break-word;
  }
  .MyPersonal h3 {
    font-size: 30px;
    margin: 10px 0;
    color: #111;
    font-weight: 500;
  }
  .dlzc .btn1 {
    border: none;
    color: #111;
    background-color: #f6f6f6;
  }
  .dlzc {
    padding-top: 28px;
    padding-bottom: 20px;
    text-align: center;
    line-height: 91px;
    font-size: 24px;
    a {
      color: #111;
    }
  }
  .wode {
    background-color: #fff;
    margin: 0 10px 10px 10px;
    padding-top: 10px ;
    .van-col {
      text-align: center;
      p {
        color: #111;
      }
    }
  }
  .xingxi {
    text-align: left;
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* .WeiPersonal > .dlzc >.van-col{
  padding-top: 130px;
} */

/* .WeiPersonal {
  margin-top: 40px;
} */

.WeiPersonal .wode .van-image {
  width: 50%;
}
</style>